<template>
    <section class="yjwzListBox">
        <div class="wzxqyfb_search">
            <p >请选择应急物资名称 |</p>
            <el-select v-model="wzhzvalue" filterable placeholder="请选择" @change="handleSelected"  v-if='listval==0' >
                <el-option
                        v-for="item in ListselectData"
                        :key="item.materialTypeCode"
                        :label="item.materialTypeName"
                        :value="item.materialTypeCode">
                </el-option>
            </el-select>
            <el-select v-model="wzxqhzvalue" filterable placeholder="请选择" @change="handleSelected" v-if='listval==1'>
                <el-option
                        v-for="item in ListselectData"
                        :key="item.materialTypeCode"
                        :label="item.materialTypeName"
                        :value="item.materialTypeCode">
                </el-option>
            </el-select>
        </div>
       <el-table 
               v-if='listval==0'
               highlight-current-row
               class="customMyElTable"
               @row-click="handleFunc"
               :data="data"
               height="350"
               style="width: 100%;">
            <el-table-column
                prop="materialTypeName"
                label="物资名称"
                show-overflow-tooltip
                width="100">
            </el-table-column>
            <el-table-column
                prop="number"
                label="数量"
                class='num'
                show-overflow-tooltip
                width="70">
            </el-table-column>
            <el-table-column
                prop="unitName"
                width="50"
                show-overflow-tooltip
                label="单位">
            </el-table-column>
            <el-table-column
                prop="managerUnit"
                width="92"
                show-overflow-tooltip
                label="管理单位">
            </el-table-column>
            <el-table-column
                prop="telephone"
                show-overflow-tooltip
                label="联系电话">
            </el-table-column>
        </el-table>
        <el-table 
               v-if='listval==1'
               highlight-current-row
               class="customMyElTable"
               @row-click="handleFunc"
               :data="data"
               height="350"
               style="width: 100%;"
              >
            <el-table-column
                prop="managerUnit"
                label="需求单位"
                width="80">
                <template slot-scope="scope">
                    <div v-if=" scope.row.managerUnit.length<=3">{{scope.row.managerUnit}}</div>
                    <el-popover placement="top"
                                popper-class="yjwzhzManagerUnitClass"
                                width="80" trigger="hover"  v-else>
                        <div>{{scope.row.managerUnit}}</div>
                        <span slot="reference">{{ scope.row.managerUnit.substr(0,3)+'...' }}</span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="materialTypeName"
                label="物资名称"
                show-overflow-tooltip
                class='num'
                width="50">
            </el-table-column>
            <el-table-column
                prop="number"
                width="70"
                show-overflow-tooltip
                label="数量">
            </el-table-column>
            <el-table-column
                prop="unitName"
                show-overflow-tooltip
                label="单位"
                width="50">
            </el-table-column>
            <el-table-column
                prop="telephone"
                width="55"
                show-overflow-tooltip
                label="联系电话">
            </el-table-column>
            <el-table-column
                prop="applicationTime"
                show-overflow-tooltip
                label="申请时间">
                <template slot-scope="scope">
                    <span> {{scope.row.applicationTime.substr(5,11)}}</span>
                </template>
            </el-table-column>
        </el-table>
    </section>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { yjwzServer } from '@/api/installServer';
import MapCommon from '@/util/MapCommon';
@Component({
    name: 'HzTable',
    mixins: [MapCommon],
})
export default class HzTable extends Vue {
  // ======================props=====================
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })  listval!: string;
    private Listinertval: any;
    private wzhzvalue: string = "";
    private wzxqhzvalue: string = "";
    private data: Array<number> = [];
  　private ListselectData: Array<number> = [];

    private AllSelectOption: any = {};
    private mounted() {　
      this.initListData(this.listval,'');
      this.getMaterialType();
      // console.log(this.listval)
    }
    private created() {
      this.Listinertval = setInterval(() => {
        this.initListData(this.listval,'');
      }, 500000);
    }
    private beforeDestroy() {
       clearInterval(this.Listinertval);
    }

    private handleFunc( row:any, event:any, column:any) {
        // 点击表格 移动到对应物资视角功能
        // this.getComponent().setCenter([row.longitude,row.latitude])
    }

    private getComponent() {
        const self: any = this;
        const modules = self.$ioc.resolve('GISModules-map');
        const component = modules.eventSituation.getComponent('material');
        return component;
    }


    private initListData(ListType:string , SlectedCode:string) {
      let params = {};
      params = {
        needMaterialType: ListType,
        materialTypeCode: SlectedCode
      };

      yjwzServer.getMaterialList(params).then( (res: any) => {
        if(res.data && res.data.data && res.data.data.length) {
          this.data = res.data.data;
        }
      });
      //this.handleSelected('001'); // 默认 n95口罩
    }
    //类型
  　// 获取应急物资类型
    private getMaterialType() {
        yjwzServer.getMaterialType().then((res: any) => {
          if (res.data.data.length) {
            this.ListselectData = res.data.data;
            debugger
            this.AllSelectOption['materialTypeCode'] = '';
            this.AllSelectOption['materialTypeName'] = '全部';
            this.AllSelectOption['orderBy'] = '';
            this.ListselectData.splice(0, 0, this.AllSelectOption)
          }
        });
    }
    private async handleSelected(checked: any) {
      const listType = this.listval;
      this.data = []
      await this.initListData(listType,checked)
    }
    //@Watch('wzxqyfbSidebar')

}
</script>
<style lang="less">
    @import url('../../../assets/css/Public.less');
    .customMyElTable.el-table .cell, .customMyElTable.el-table th > .cell{
      /*  display: -webkit-box;
        -webkit-box-orient: vertical;
       // -webkit-line-clamp: 2;
        overflow: hidden;*/
    }
    .yjwzListBox{
        padding:0 10px;
    }
    .wzxqyfb_search{
        /*width: 432px;*/
        height: 40px;
        line-height: 40px;
        display: flex;
        color:#c2e7f2;
        background:rgba(0,33,56,.4);
        border-radius: 4px;
        border: solid 1px rgba(131, 239, 255, 0.66);
        margin-bottom: 6px;
        margin-top: 6px;


        p{
            padding-left: 20px;
        }
        & .el-input__inner{
            background-color: transparent;
            border:none;
            color: #c2e7f2;
        }
        & .el-select{
            width: 246px;
        }
        & .el-input__suffix{
            /*width: 40px;*/
            /*height: 36px;*/
            /*border-style: solid;*/
            /*border-width: 1px;*/
            /*border-image-source: linear-gradient(-30deg,*/
            /*#4489c6 0%,*/
            /*#5cc1d7 28%,*/
            /*#74f9e7 55%,*/
            /*#ffffff 100%);*/
            /*border-image-slice: 1;*/
            /*display: flex;*/
            /*justify-content: center;*/
            /*align-items: center;*/
        }
    }
    & td,& th{
        /*font-size: 16px!important;*/
        text-align: center!important;
    }
    .yjwzxqhz {
        & td:nth-of-type(3){

            color:#e54034;
        }
    }
    .yjwzhz{
        & td:nth-of-type(2){
            color:#1dfe8d;
        }
    }
    .el-tooltip__popper{
        min-width: 70px!important;
        max-width: 200px!important;
    }

    .yjwzhzManagerUnitClass{
        background: #000!important;
        color: white!important;
        border: 1px solid #000 !important;
        text-align: center!important;
        .popper__arrow{
            border-top-color:#000!important;
        }
        .popper__arrow:after{
            border-top-color:#000!important;
        }
    }
</style>
